<template>
  <div class="sql-web1-container">
    <!-- 头部 -->
    <header class="sql-web1-header">
      <div class="header-content">
        <div class="header-logo-container">
          <div class="logo-icon-container">
            <i class="fas fa-shield-alt text-white text-2xl"></i>
          </div>
          <div>
            <h1 class="site-title">简易SQL注入攻击练习</h1>
            <p class="site-subtitle">http://localhost:8080/new_env/flaw_sql1/556135zs541.php</p>
          </div>
        </div>
        <div class="header-badge-container">
          <div class="header-badge">
            <i class="fas fa-user-shield mr-2"></i>安全练习
          </div>
        </div>
      </div>
    </header>

    <!-- 主内容区 -->
    <main class="main-content">
      <div class="content-wrapper">
        <!-- 页面标题和说明 -->
        <div class="page-header">
          <div class="page-icon-container">
            <i class="fas fa-bug text-white text-xl"></i>
          </div>
          <h2 class="page-title">SQL注入基础练习</h2>
          <p class="page-description">
            本练习包含一个简单的登录表单，存在SQL注入漏洞。
            尝试使用万能钥匙获取FLAG。
          </p>
        </div>

        <!-- 登录表单区域 -->
        <div class="login-form-container">
          <div class="form-header">
            <h3 class="form-title">
              <div class="form-icon-container">
                <i class="fas fa-lock text-blue-400"></i>
              </div>
              管理员登录
            </h3>
            <div class="vulnerability-badge">
              <i class="fas fa-shield-alt mr-1"></i>存在漏洞
            </div>
          </div>

          <!-- 登录表单 -->
          <form @submit.prevent="submitLogin" class="mb-6">
            <div class="form-group">
              <label for="username" class="form-label">
                <i class="fas fa-user mr-2 text-gray-500"></i>用户名
              </label>
              <div class="input-wrapper">
                <input
                    type="text"
                    id="username"
                    v-model="username"
                    class="form-input"
                    placeholder="输入用户名"
                >
                <i class="fas fa-user input-icon text-gray-500"></i>
              </div>
            </div>

            <div class="form-group">
              <label for="password" class="form-label">
                <i class="fas fa-key mr-2 text-gray-500"></i>密码
              </label>
              <div class="input-wrapper">
                <input
                    type="password"
                    id="password"
                    v-model="password"
                    class="form-input"
                    placeholder="输入密码"
                >
                <i class="fas fa-key input-icon text-gray-500"></i>
              </div>
            </div>

            <div class="submit-button-container">
              <div class="vulnerability-info">
                <i class="fas fa-info-circle mr-1"></i> 存在SQL注入漏洞
              </div>
              <button
                  type="submit"
                  class="submit-button"
              >
                <i class="fas fa-sign-in-alt mr-2"></i> 登录系统
              </button>
            </div>
          </form>

          <!-- 执行的SQL语句显示 -->
          <div v-if="lastSql" class="sql-display-container">
            <div class="sql-display-header">
              <i class="fas fa-database text-blue-400 mr-2"></i>
              <h4 class="sql-display-title">执行的SQL语句</h4>
            </div>
            <div class="sql-code">
              {{ lastSql }}
            </div>
          </div>

          <!-- 结果显示区域 -->
          <div v-if="showResult" class="result-container">
            <!-- 登录成功 - 获取FLAG -->
            <div v-if="result.success" class="success-result">
              <div class="success-content">
                <div class="success-icon-container">
                  <i class="fas fa-flag text-white text-2xl"></i>
                </div>
                <h4 class="success-title">恭喜！攻击成功</h4>
                <p class="success-message">你成功利用了SQL注入漏洞并获取了FLAG！</p>
                <div class="flag-display">
                  {{ result.flag }}
                </div>
                <div class="success-badge">
                  <i class="fas fa-check-circle mr-2"></i> SQL注入攻击成功
                </div>
              </div>
            </div>

            <!-- 登录失败 -->
            <div v-else class="error-result">
              <div class="error-content">
                <div class="error-icon-container">
                  <i class="fas fa-exclamation-triangle text-red-400"></i>
                </div>
                <div>
                  <h4 class="error-title">登录失败</h4>
                  <p class="error-message">{{ result.error }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 提示区域 -->
        <div class="hints-container">
          <div class="hints-header">
            <div class="hints-icon-container">
              <i class="fas fa-lightbulb text-amber-400"></i>
            </div>
            <h3 class="hints-title">练习提示</h3>
          </div>
          <ul class="hints-list">
            <li class="hint-item">
              <i class="fas fa-chevron-circle-right hint-icon text-amber-400 mt-1 mr-3"></i>
              <span class="hint-text">这个登录表单存在SQL注入漏洞</span>
            </li>
            <li class="hint-item">
              <i class="fas fa-chevron-circle-right hint-icon text-amber-400 mt-1 mr-3"></i>
              <span class="hint-text">尝试在用户名输入框使用特殊的注入字符串</span>
            </li>
            <li class="hint-item">
              <i class="fas fa-chevron-circle-right hint-icon text-amber-400 mt-1 mr-3"></i>
              <span class="hint-text">目标是绕过登录验证并获取FLAG</span>
            </li>
          </ul>
        </div>
      </div>
    </main>


  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      showResult: false,
      result: {},
      lastSql: ''
    };
  },
  methods: {
    submitLogin() {
      this.showResult = true;

      // 模拟后端SQL查询构建（存在注入漏洞）
      // 注意：真实环境中绝不应该这样拼接SQL！
      const sql = `SELECT * FROM users WHERE username = '${this.username}' AND password = '${this.password}'`;
      this.lastSql = sql;

      // 检查是否使用了万能钥匙注入
      if (this.username.includes("' OR '1'='1") || this.username.includes('admin\' OR \'1\'=\'1')) {
        // 注入成功，返回FLAG
        this.result = {
          success: true,
          flag: '『FLAG-注入flag』'
        };
      } else if (this.username === 'admin' && this.password === 'secret') {
        // 正常管理员登录也能获取FLAG（作为对比）
        this.result = {
          success: true,
          flag: '『FLAG-管理员登录flag』'
        };
      } else {
        // 登录失败
        this.result = {
          success: false,
          error: '用户名或密码错误'
        };
      }
    }
  }
};
</script>

<style scoped lang="css" src="@/assets/styles/sqlweb1.css"></style>
